<!DOCTYPE HTML> 
<html>
<head>
<meta charset="utf-8">
<title>TouchScroll demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
<link href='style.css' rel='stylesheet'/>
<script type="text/javascript" src="touchScroll.js"></script>
</head>
<body>

<h1>TouchScroll</h1>
<h2>渲染前</h2>
<div id="myscroll2" class="myscroll">
<h1>绑定事件</h1>
<button id="mybtn">test</button>
<h1>普通文字</h1>
	<p>那我是否定了你对于<a href="#">项目架构理解的热情</a>了么？完全不。我只是要求你尽早的交付价值，一旦你开始一个项目，搭建了开发环境，你就不应该花一两周时间才交付什么，无论他的规模大小。假如你是一个有经验的程序员却两周都没有任何交付，你的经理怎么会知道你是真的在工作还是在看新闻。
<br/><br/>
所以交付可以使大家都轻松起来。不要认为你能够做有价值的交付前必须理解整个项目。这是完全<a href="#">错误的。加一段javascript的</a>验证代码对业务就很有价值，经理能够通过你的交付达到对你的信任。这样能够向上级领导证明你的贡献以及员工价值。
<br/><br/>
日复一日，在你不断修复bug及增强功能之<a href="#">后，就能够慢慢开始理解项目架构。不要低</a>估对系统方方面面理解时需要花费的时间。花3-4天理解认证机 制，2-3天理解事物管理。这些都是依靠之前的相似项目的经历，但关键还是要花时间才能透彻的理解。要在日常工作中挤出时间，不要向经理要求特定的时间来 做这些。
<br/><br/>
找找项目是否有一些不断维护的单元测试用例。有效的单元测试用例是理解大型项目代码的很好途径。单元测试能够帮助理解代码片段，包括一个单元的外部接口（单元如何被调用以及返回内容）及其内部实现（调试单元测试比调试整个实际用例简单许多）。
<br/><br/>
你如果能够很好的理解一些内容，写一些笔记，或者画一些类图、时序图、数据模型图，以便你或日后其他的开发者维护。</p><br/>
<h1>图片列表</h1>
<ul class="imglist">
	<li><img src="imgs/1.jpg"/></li>
    <li><img src="imgs/1.jpg"/></li>
    <li><img src="imgs/1.jpg"/></li>
    <li><img src="imgs/1.jpg"/></li>
</ul><div class="clear"></div>
<br/>
<h1>其他格式</h1>
<table>
	<tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
    <tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
    <tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
</table>
</div><br/><br/><br/><br/>
<h2>渲染后</h2>
<div class="myscroll" id="myscroll">
<h1>绑定事件</h1>
<button id="mybtn1">test</button>
<h1>普通文字</h1>
	<p>那我是否定了你对于<a href="#">项目架构理解的热情</a>了么？完全不。我只是要求你尽早的交付价值，一旦你开始一个项目，搭建了开发环境，你就不应该花一两周时间才交付什么，无论他的规模大小。假如你是一个有经验的程序员却两周都没有任何交付，你的经理怎么会知道你是真的在工作还是在看新闻。
<br/><br/>
所以交付可以使大家都轻松起来。不要认为你能够做有价值的交付前必须理解整个项目。这是完全<a href="#">错误的。加一段javascript的</a>验证代码对业务就很有价值，经理能够通过你的交付达到对你的信任。这样能够向上级领导证明你的贡献以及员工价值。
<br/><br/>
日复一日，在你不断修复bug及增强功能之<a href="#">后，就能够慢慢开始理解项目架构。不要低</a>估对系统方方面面理解时需要花费的时间。花3-4天理解认证机 制，2-3天理解事物管理。这些都是依靠之前的相似项目的经历，但关键还是要花时间才能透彻的理解。要在日常工作中挤出时间，不要向经理要求特定的时间来 做这些。
<br/><br/>
找找项目是否有一些不断维护的单元测试用例。有效的单元测试用例是理解大型项目代码的很好途径。单元测试能够帮助理解代码片段，包括一个单元的外部接口（单元如何被调用以及返回内容）及其内部实现（调试单元测试比调试整个实际用例简单许多）。
<br/><br/>
你如果能够很好的理解一些内容，写一些笔记，或者画一些类图、时序图、数据模型图，以便你或日后其他的开发者维护。</p><br/>
<h1>图片列表</h1>
<ul class="imglist">
	<li><img src="imgs/1.jpg"/></li>
    <li><a href="http://www.qiqiboy.com"><img src="imgs/1.jpg"/></a></li>
    <li><img src="imgs/1.jpg"/></li>
    <li><img src="imgs/1.jpg"/></li>
</ul><div class="clear"></div>
<br/>
<h1>其他格式</h1>
<table>
	<tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
    <tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
    <tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr><tr>
    	<td>表格</td>
        <td>表格</td>
        <td>表格</td>
    </tr>
</table>
</div>

<script type="text/javascript">
console=window.console || {dir:new Function(),log:new Function()};
var t1=new TouchScroll({id:'myscroll','width':5,'opacity':0.7,color:'#555',minLength:10,ondrag:function(){
		
}});
window.onload=function(){
t1.resize();
console.dir(t1);
}
var t2=new TouchScroll({id:'myscroll','width':5,'opacity':0.8,color:'red',minLength:20});
document.getElementById('mybtn').onclick=function(){alert('已点击')}
document.getElementById('mybtn1').onclick=function(){alert('已点1击')}
document.getElementById('myscroll2').onscroll=function(){
	var st=this.scrollTop;
	t1.scrollTo(0,st);
}
</script>

</body> 
</html> 